import React from "react";
import ButtonAtom from "../../UI_KIT/Atoms/Button.Atom";
import ButtonAtomEnum from "../../UI_KIT/Atoms/Button.Atom/enum";
import { EmptyBlockProps } from "./type";
import Link from "next/link";
import TextAtom from "../../UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "../../UI_KIT/Atoms/Text.Atom/enum";
import { useTranslation } from "react-i18next";

const EmptyBlock: React.FC<EmptyBlockProps> = (props) => {
  const { t } = useTranslation();

  const { subHead, title, subTitle } = props;
  return (
    <div className="flex flex-col justify-center items-center h-[95vh]">
      <TextAtom
        className="font-bold leading-[20px] text-tiffany"
        type={TextAtomEnum.enum_h5}
      >
        {subHead}
      </TextAtom>
      <TextAtom
        className="font-bold text-tiffany leading-[50px] mt-3 mb-5"
        type={TextAtomEnum.enum_h1}
      >
        {title}
      </TextAtom>
      <TextAtom
        className="mx-auto text-center max-w-[640px] font-medium text-textColor leading-[25px]"
        type={TextAtomEnum.enum_h4}
      >
        {subTitle}
      </TextAtom>
      <div className="w-[180px] mt-10">
        <ButtonAtom type={ButtonAtomEnum.enum_butButton} className="mx-auto">
          <Link href="/catalog">{t("EmptyBlock.button")}</Link>
        </ButtonAtom>
      </div>
    </div>
  );
};
export default React.memo(EmptyBlock);
